{% extends "base.html" %}

{% block content %}
<div class="page-title">
    <h3>员工统计</h3>
</div>

<div class="attributes-container">
    <h4 id="employee-count">加载中...</h4>
    <table>
        <thead>
            <tr>
                <th>员工编号</th>
                <th>员工姓名</th>
                <th>员工密码</th>
                <th>员工级别</th>
                <th>员工电话</th>
                <th>员工工资</th>
                <th>备注</th>
            </tr>
        </thead>
        <tbody id="employee-table-body">
        </tbody>
    </table>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        fetch('/api/employees/count')
            .then(response => response.json())
            .then(data => {
                document.getElementById('employee-count').textContent = `员工总数: ${data.count}`;
            })
            .catch(error => {
                console.error('Error:', error);
                document.getElementById('employee-count').textContent = '无法加载员工数量';
            });

        fetch('/api/employees')
            .then(response => response.json())
            .then(data => {
                const tableBody = document.getElementById('employee-table-body');
                tableBody.innerHTML = '';
                data.forEach(employee => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${employee['员工编号']}</td>
                        <td>${employee['员工姓名']}</td>
                        <td>${employee['员工密码']}</td>
                        <td>${employee['员工级别']}</td>
                        <td>${employee['员工电话']}</td>
                        <td>${employee['员工工资']}</td>
                        <td>${employee['备注']}</td>
                    `;
                    tableBody.appendChild(row);
                });
            }).catch(error => {
                console.error('Error:', error);
            });
    });
</script>
{% endblock %}
